<template>
  <div class="data-search-container clearfix">
    <ul class="item fl">
      <li v-for="(item, index) in items" :key="index" @click="selectItem(item.type)">
        <span :class="[current == item.type ? 'cur' : '']">{{item.name}}</span>
      </li>
    </ul>
    <!-- <ul class="date fr" @click="showData">
      <li class="date_time" v-if="!startTime || !endTime">
        <span>自定义时间</span>
        <svg-icon icon-class="icon_right" class="date-hide"></svg-icon>
      </li>
      <li class="date-show" v-else>
        <span>{{startTime}}</span>
        <span>~</span>
        <span>{{endTime}}</span>
      </li>
    </ul> -->
    <ul class="date fr">
      <li class="date_time" >
        <wx-picker class="wx-picker" value="startTime" mode="date" @change="startDateChange">
          <span v-if="!startTime">开始时间</span>
          <span class="active" v-else>{{startTime}}</span>
        </wx-picker>
        <wx-picker class="wx-picker" value="startTime" mode="date" @change="endDateChange">
          <span v-if="!endTime">~ 结束时间</span>
          <span class="active" v-else>~ {{endTime}}</span>
        </wx-picker>
      </li>
    </ul>

    <van-popup v-model="show_date" position="bottom" :style="style">
      <div v-if="show_start_time">
        <van-datetime-picker
          v-model="historyStartTime"
          type="date"
          title="选择开始时间"
          @confirm="selectStart"
          @cancel="cancelTime"
        />
      </div>
      <div v-else>
        <van-datetime-picker
          v-model="historyEndTime"
          type="date"
          title="选择结束时间"
          @confirm="selectEnd"
          @cancel="cancelTime"
        />
      </div>
    </van-popup>


  </div>
</template>

<script>
// import { Dialog } from 'vant'
// import Storage from '@/utils/store.js'
import Vue from 'vue'
import { Popup, DatetimePicker } from 'vant'
Vue.use(Popup).use(DatetimePicker)
import { formatDay } from '@/utils/index'
export default Vue.extend({
  props: {
    type: Number,
    Data: {
      type: Object
    }
  },
  data() {
    return {
      style: { height: '40%' },
      items: [
        {
          name: '昨天',
          type: 1
        },
        {
          name: '近七天',
          type: 2
        },
        {
          name: '全部',
          type: 0
        }
      ],
      current: 0,
      show_date: false,
      show_start_time: true,
      startTime: null,
      endTime: null,
      historyStartTime: new Date(),
      historyEndTime: new Date()
    }
  },
  methods: {
    selectItem(type) {
      this.current = type
      this.startTime = null
      this.endTime = null
      // console.log(this.current)
      this.$emit('init', {
        current: this.current,
        startTime: this.startTime,
        endTime: this.endTime
      })
    },
    // 小程序时间选择
    startDateChange(e){
      this.startTime=e.detail.value
      this.historyStartTime = new Date(e.detail.value)
      if(!this.endTime) return
      this.selectEnd(this.historyEndTime)
    },
    endDateChange(e){
      this.endTime=e.detail.value
      this.historyEndTime = new Date(e.detail.value)
      if(!this.startTime) return
      this.selectEnd(this.historyEndTime)
    },

    showData() {
      this.show_date = !this.show_date
    },
    selectStart(time) {
      this.style = { height: '10%' }
      this.historyStartTime = time
      this.startTime = this.getTime(time)
      this.show_start_time = false
      setTimeout(() => {
        this.style = { height: '40%' }
      }, 100)
    },
    selectEnd(time) {
      const T1 = this.historyStartTime.getTime()
      const T2 = time.getTime()
      if (T2 < T1) {
        this.$Error('开始时间不能小于结束时间')
        return
      }
      this.historyEndTime = time
      this.endTime = this.getTime(time)
      this.show_date = false
      this.show_start_time = true
      this.current = null
      // this.init()
      this.$emit('init', {
        current: this.current,
        startTime: this.startTime,
        endTime: this.endTime
      })
    },
    cancelTime() {
      this.show_date = false
      this.show_start_time = true
    },
    getTime(time) {
      const t = time.getTime()
      return formatDay(t)
    }
  }
})
</script>

<style lang="scss">
@import 'src/styles/variables';
@import 'src/styles/mixin';
.data-search-container{
  .item {
    display: flex;
    justify-content: space-between;
    // flex-wrap: wrap;
    width: 50%;
    margin-left: 20px;
    height: 56px;
    border: 1.5px solid $warning;
    border-radius: 28px;
    box-sizing: border-box;
    overflow: hidden;
    li {
      flex: 1;
      // height: 100%;
      text-align: center;
      border-right: 1px solid $warning;
      box-sizing: border-box;
      &:last-child {
        border-right: none;
      }
      span {
        display: inline-block;
        width: 100%;
        color: $warning;
        font-size: 22px;
        line-height: 56px;
        &.cur {
          border-right: 1px solid $warning;
          color: $default;
          background-color: $warning;
        }
      }
    }
  }
  .date {
    margin-right: 20px;
    display: inline-block;
    color: #666;
    span {
      line-height: 60px;
    }
    .date_time{
      &.active{
        color:#ff5a00;
      }
      .wx-picker{
        display:inline-block;
        width:auto;
        padding:0 6px;
        background:none;
        .active{
          color:#ff5a00;
        }
      }
    }
    .date-hide {
      transform: rotateZ(90deg);
    }
    .date-show {
      line-height: 56px;
      span {
        color: $warning;
        font-size: 24px;
      }
    }
  }
}
</style>
